<template>
  <qc-page-header @back="goBack"></qc-page-header>

  <a-row :gutter="[16, 16]">
    <a-col :xs="24" :sm="24" :md="24" :lg="8" :xl="6" class="role-form-wrapper">
      <a-card :bordered="false">
        <span>{{ t('org.role.roleInfo') }}</span>
        <a-button type="link" @click="saveRole"> {{ t('component.button.saveText') }}</a-button>
        <a-button type="link" @click="disabledForm">禁用表单</a-button>
        <a-divider />
        <role-form layout="vertical" :role-id="roleId" ref="roleFormRef"></role-form>
      </a-card>
    </a-col>
    <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="18">
      <a-card :bordered="false">
        <a-tabs type="card" v-model:activeKey="activeKey">
          <a-tab-pane key="1" :tab="t('org.role.roleUserOrDept')">
            <user-group-role-list :role-id="roleId"></user-group-role-list>
          </a-tab-pane>
          <a-tab-pane key="2" :tab="t('org.role.menuPermissions')">
            <menu-permission :roleId="roleId"></menu-permission>
          </a-tab-pane>
          <a-tab-pane key="3" :tab="t('org.role.actionPermissions')">
            <action-permission :roleId="roleId"></action-permission>
          </a-tab-pane>
        </a-tabs>
      </a-card>
    </a-col>
  </a-row>
</template>
<script lang='ts'>
import { defineComponent, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { roleIndexPageUrl } from './interface'
import RoleForm from './component/role-form.vue'
import UserGroupRoleList from '/@/views/org/user-group-role/component/user-group-role-list.vue'
import MenuPermission from '../resource-authority/menu-permission.vue'
import ActionPermission from '../resource-authority/action-permission.vue'
export default defineComponent({
  name: 'OrgRoleForm',
  components: {
    RoleForm,
    UserGroupRoleList,
    MenuPermission,
    ActionPermission,
  },
  setup() {
    const { t } = useI18n()
    const roleFormRef = ref()
    const router = useRouter()
    const roleId = router.currentRoute.value.params.id
    const goBack = () => router.push({ path: roleIndexPageUrl })
    const saveRole = () => roleFormRef.value.onSubmit()
    const disabledForm = () => {
      roleFormRef.value.disabledForm()
    }
    return {
      t,
      roleFormRef,
      roleId,
      activeKey: ref('1'),
      goBack,
      saveRole,
      disabledForm,
    }
  },
})
</script>
<style lang='less' scoped>
::v-deep(.ant-divider-horizontal) {
  margin: 16px 0;
}

.role-form-wrapper ::v-deep(.ant-btn) {
  height: unset;
  float: right;
}
</style>